<template>
    <form method="post">
        <div style="width: 100%">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left">
                <font style="font-size: 25px; font-family: 微软雅黑">打卡信息录入</font>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <br />
                <br />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目编号" prop="proCode">
                            <el-input v-model="ruleForm.proCode" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="proName" >
                            
                            <!-- 下拉选择框 -->
                            <el-select v-model="ruleForm.proId" placeholder="请选择所属项目" @change="handleChange">
                                <el-option id='1'
                                v-for="item in options"
                                :key="item.proName"
                                :label="item.proName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目类型" prop="proType">
                            <el-input v-model="ruleForm.proType" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目位置" prop="proInterval">
                            <el-input v-model="ruleForm.proInterval" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="打卡方" prop="cardUnit">
                            <el-input v-model="ruleForm.cardUnit" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="打卡人" prop="cardPerson">
                            <el-input v-model="ruleForm.cardPerson" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="打卡时间" prop="cardTime">
                            <el-date-picker
                                type="datetime"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="ruleForm.cardTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志" prop="journal">
                            <el-input v-model="ruleForm.journal" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
            
        </div>
    </form>
</template>

<script>
import label from '../../../../api/card/card';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            dialogVisible: false,
            options: [],
            ruleForm: {
                proName: '',
                proCode: '',
                proType: '',
                proInterval: '',
                cardUnit: '',
                cardPerson: '',
                cardTime: '',
                // 日志字段
                journal: '',
                proId:'',
            },
            eldiaglog_title: '',
            rules: {
                // xmname: [
                //     { required: true, message: '请输入项目名称', trigger: 'blur' }
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],

                proName: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
                proCode: [{ required: true, message: '请填写项目代码', trigger: 'blur' }],
                proType: [{ required: true, message: '请填写项目类型', trigger: 'blur' }],
                proInterval: [{ required: true, message: '请填写项目位置', trigger: 'blur' }],
                cardUnit: [{ required: true, message: '请填写打卡方', trigger: 'blur' }],
                cardPerson: [{ required: true, message: '请填写打卡人员', trigger: 'blur' }],
                cardTime: [{ required: true, message: '请选择时间', trigger: 'blur' }],
                journal: [{ required: true, message: '请填写日志', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.init();
        this.getprojectData()
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        // 获取label 和value
        handleChange(val){
            var obj = {}
            obj = this.options.find(function(item){
                return item.id === val
            })
         this.ruleForm.proName = obj.proName
        },
        async getprojectData() {
            const { data: res } = await this.$http.post('/project_source/EssentialInformation/findAll')
            if(res.code != 20000)return this.$message.error('获取项目列表失败！')
            // console.log(res)
            this.options = res.data
            
        },
        dialogFrameSrc11() {
            this.dialogVisible = true;
            dialogFrameSrc();
        },
        newdiaglog(stype, stitle,id) {
            this.dialogVisible = true;
            if ($('#idframe').attr('src') == undefined) {
                setTimeout(function () {
                    dialogFrameSrc(stype,id);
                }, 500);
            } else {
                dialogFrameSrc(stype,id);
            }
            this.eldiaglog_title = stitle;
        },
        init() {
            //判断路径有id值,做修改
            if ($('#idframe', window.parent.document).attr('data-id') != null) {
                //从路径获取id值
                const id = $('#idframe', window.parent.document).attr('data-id');
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.ruleForm = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.ruleForm).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                })
                this.$nextTick(()=>{
               $("#idcloseclick", parent.document).click();
         })
            }) 
            
        },
        tonew() {
            this.ruleForm = {};
        },
        shutdown() {
            $("#idcloseclick", parent.document).click();
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.ruleForm = response.data;
                
            });
        },
        update() {
            this.ruleForm.updateTime = null
            this.ruleForm.createTime = null
            console.log(this.ruleForm)
            label.updateInfo(this.ruleForm).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                $("#idcloseclick", parent.document).click();
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
</style>